<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>layuiAdmin</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-3.1.0.min.js"></script>
  <script src="layui/layui.js"></script>
  <script src="/webjars/sockjs-client/sockjs.min.js"></script>
  <script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
</body>
<script>
  layui.use('table', function () {
    var table=layui.table;
    function setTableData(json) {
      table.render({   //渲染 表格
        elem: '#demo'
        , height: 550
        , defaultToolbar: []
        , data: json
        //, url: '/recordFind' //数据接口
        , page: true //开启分页
        //, skin: 'line'// 设置表格样式
        , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
        , limit: 10  //一页显示10条数据
        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
          var result;
          console.log(this);
          console.log(JSON.stringify(res));
          if (this.page.curr) {
            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          } else {
            result = res.data.slice(0, this.limit);
          }
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "data": result //解析数据列表
          };
        }  //以上是页面自动分页的代码 就写成这样就行了

        , cols: [[ //表头
          {checkbox: true, LAY_CHECKED: false}
          , {field: 'id', title: 'id', width: 120, sort: true}
          , {field: 'number', title: '自行车编号', width: 120,}
          , {field: 'username', title: '用户名', width: 120}
          , {field: 'start', title: '开始时间', width: 200, sort: true}
          , {field: 'end', title: '结束时间 ', width: 200, sort: true}
          , {field: 'repair', title: '故障次数 ', width: 200, sort: true}
          , {field: 'cost', title: '合计费用', width: 120}
          , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
        ]]
      });
    }
    window.setTableData = setTableData; // 将方法暴露到全局
  })
</script>

<script src="js/mysocket.js"></script>
</html>